//思想观点页面
<template>
    <div class="idea" style="margin: 0 0 80px">
        <div class="header">
            <span>思想观点</span>
        </div>
        <div class="line"></div>
        <el-form :inline="true" :model="idea" class="demo-form-inline" align="left"
            style="padding: 40px 0 20px; box-sizing: border-box;">
            <el-form-item>
                <el-input v-model="idea.title" placeholder="请输入观点名称" />
            </el-form-item>
            <el-form-item label="所属频道">
                <el-select v-model="idea.channel" placeholder="请选择">
                    <el-option label="组织变革" value="组织变革" />
                    <el-option label="创新型组织" value="创新型组织" />
                    <el-option label="团队建设" value="团队建设" />
                    <el-option label="企业文化" value="企业文化" />
                </el-select>
            </el-form-item>
            <el-form-item label="推荐至首页">
                <el-select v-model="idea.checked" placeholder="请选择">
                    <el-option label="是" value="是" />
                    <el-option label="否" value="否" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" @click="onSubmit(idea.title, idea.channel)" style="width:100px">
                    查询</el-button>
            </el-form-item>
        </el-form>
        <div class="line"></div>

        <!-- 新增思想观点 -->
        <el-form-item style="margin:10px">
            <el-button type="warning" @click="addIdea" style="width:150px;height:40px">+新增思想观点</el-button>
        </el-form-item>

        <!-- 思想观点列表 -->

        <el-table :data="tableData" border header-align="center"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
            <el-table-column prop="id" label="序号" width="100" align="center" />
            <el-table-column prop="title" label="观点标题" width="320" align="center" />
            <el-table-column prop="channel" label="所属频道" width="160" align="center" />
            <el-table-column prop="content" label="观点简介" width="120" align="center" />
            <el-table-column prop="checked" label="推荐至首页" width="120" align="center" />
            <el-table-column prop="sort" label="排序" width="140" align="center">
                <template #default="scope">
                    <input type="text" v-model="scope.row.sort" class="number">
                </template>
            </el-table-column>
            <el-table-column label="操作时间" width="120" prop="time" align="center">
            </el-table-column>
            <el-table-column label="操作" width="140" align="center">
                <template #default="scope">
                    <el-button link type="warning" size="small" @click="handleClick(scope.row.id)">编辑</el-button>
                    <el-button link type="warning" size="small" @click="handleDel(scope.row.id)">删除</el-button>
                    <el-button link type="warning" size="small" @click="handleFine(scope.row.id)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- 弹出窗口 -->
        <el-dialog v-model="centerDialogVisible" title="观点详情" width="40%" center>
            <span :detail="detail" v-html="detail">
            </span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="centerDialogVisible = false">
                        关闭
                    </el-button>
                </span>
            </template>
        </el-dialog>




        <div style="display:flex;justify-content: space-between;align-items: center;">
            <div>
                共 {{ tableData.length }} 项
            </div>
            <div class="demo-pagination-block"
                style="display:flex; justify-content: center;align-items: center;margin: 20px;">
                <span>
                    共{{ Math.ceil(total / size) }}页/

                </span>
                <el-pagination @size-change="sizeChange" background @current-change="currentChange" :page-size="size"
                    :page-sizes="pageSizes" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>

            </div>
        </div>
    </div>





</template>

<script setup >
//mock模拟数据
// import { hqpermset } from '../../api'

//store
import useIdeasData from '../../store/idea'

import { useRouter } from 'vue-router';
import { onMounted, onUpdated, reactive, ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'

//获取store数据渲染
const store = useIdeasData()


const router = useRouter()
const tableData = ref([])


//总条目数
const total = ref(0)

//一页多少条
const size = ref(10)

const pageSizes = ref([5, 10, 20, 30, 40])

//第几页
const page = ref(1)


const detail = ref('<p></p>')


const centerDialogVisible = ref(false)

const idea = reactive({
    id: '',
    title: '',
    channel: '',
    content: '',
    checked: '',
    Image: '',
    sort: '',
    time: '',
    detail: '',
})

//获取表单数据
const getData = () => {
    // const result = (await hqpermset())

    const result = store.ideas
    tableData.value = result.slice(
        (page.value - 1) * size.value,
        page.value * size.value)
    total.value = result.length

}

//数据挂载
onMounted(() => {
    getData()
})


//数据查询
const onSubmit = (title, channel) => {
    if (title) {
        const res = store.findIdeaData(title)
        tableData.value = res
        total.value = tableData.value.length
        console.log(res)
        ElMessage.success(title + '名称查询成功!')
        return
    }
    if (channel) {
        const res = store.findIdeaChannel(channel)
        tableData.value = res
        total.value = tableData.value.length
        console.log(res)
        ElMessage.success(channel + '所属频道查询成功!')
        return
    }
    ElMessage.error('查询失败')

}
const addIdea = () => {
    router.push({
        path: '/content/newidea'
    })
}

const handleDel = (id) => {
    ElMessageBox.confirm(
        '是否删除当前会员?',
        '删除提示',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning',
        }
    )
        .then(() => {
            function remove(id) {
                tableData.value = store.ideas.filter(item => item.id !== id)

                ElMessage.success('删除成功!')
                store.ideas = tableData.value
                return tableData.value
                // 删除成功，重新查询当前页数据渲染
                // TODO
            }
            remove(id)
            store.ideas = tableData.value

            console.log('删除...')
        })
        .catch(() => {
            console.log('cancel')
        })
}




const handleFine = (id) => {
    centerDialogVisible.value = true

    console.log('查看数据' + id)
    const res = store.ideas.find(item => item.id == id)
    detail.value = res.detail
    ElMessage.success('查看详情')
}

const handleClick = (id) => {
    router.push({
        path: '/content/newidea',
        query: {
            id,
        }
    })
}

const currentChange = (val) => {
    page.value = val;
    getData()
    console.log(`current page: ${val}`)
}


const sizeChange = (val) => {
    console.log(val)
    size.value = val
    page.value = 1
    getData()
}


</script>


<style  lang="less" scoped>
// 弹出层
.dialog-footer button:first-child {
    margin-right: 10px;
}


.header {
    width: 100%;
    height: 40px;
    padding: 5px;
    color: rgb(255, 153, 0);
    line-height: 30px;

    span {
        display: inline-block;
        width: 100px;
        height: 26px;
        border-left: 6px solid rgb(255, 153, 0);
        padding: 5px;
    }
}

.line {
    height: 10px;
    width: 100%;
    background-color: rgb(246, 239, 239);
}

.number {
    width: 60px;
    height: 30px;
    text-align: center;
}

.demo-form-inline {
    margin: 0 50px;
    box-sizing: border-box;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>